<template>
    <div class="app-container">
        <h4>用户信息</h4>
        <table class="table table-striped table-condenseda table-bordered" width="100%">
        <tbody>
        <tr>
          <th>编号</th>
          <td>{{userInfoList.userId}}</td>
          <th>用户名</th>
          <td>{{ userInfoList.username}}</td>
        </tr>
        <tr>
            <th width="15%">手机号</th>
            <td width="35%"><b>{{ userInfoList.phone }}</b></td>
            <th width="15%">真实姓名</th>
            <td width="35%">{{ userInfoList.realName }}</td>
        </tr>
        <tr>
          <th width="15%">性别</th>
          <td width="35%"><b>男</b></td>
          <th width="15%">生日</th>
          <td width="35%">{{ userInfoList.birthday }}</td>
        </tr>
        <tr>
            <th>状态</th>
            <td>{{ userInfoList.locked == 0 ? '正常' : '锁定中' }}</td>
            <th>地址</th>
            <td>{{ userInfoList.address }}</td>
        </tr>
        <tr>
          <th>身份类型</th>
          <td>{{ userInfoList.idType }}</td>
          <th>身份编号</th>
          <td>{{ userInfoList.idNumber }}</td>
        </tr>
        </tbody>
        </table>
      <br>
      <el-row>
        <el-button  @click="userBasic">修改</el-button>
      </el-row>
        <h4>认证信息</h4>
        <table class="table table-striped table-condenseda table-bordered" width="100%">
            <tbody>
            <tr>
                <th width="15%">姓名</th>
                <td width="35%"><b>{{ userInfoList.realName }}</b></td>
                <th width="15%">学号</th>
                <td width="35%">{{ userInfoList.idNumber }}</td>
            </tr>
            <tr>
                <th>学校</th>
                <td>东莞理工学院</td>
                <th>学院</th>
                <td>{{userInfoList.department}}</td>
            </tr>
            <tr>
              <th>年级</th>
              <td>18级</td>
              <th>专业</th>
              <td>软件工程</td>
            </tr>
            <tr>
              <th>身份</th>
              <td>{{ userInfoList.identityCate }}</td>
              <th>注册日期</th>
              <td>{{userInfoList.birthday}}</td>
            </tr>
            </tbody>
        </table>
      <br>


      <el-row>
        <el-popconfirm
            confirm-button-text='好的'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            title="您当前无权限修改认证内容，请联系管理员"
        >
          <el-button >删除</el-button>
          <el-button  slot="reference" >修改</el-button>
        </el-popconfirm>

      </el-row>
    <h4>打卡记录</h4>
    <el-table
        v-loading="listLoading"
        :data="reportList"
        stripe
            style="width: 100%">

        <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
                {{ scope.$index + 1 }}
        </template>
        </el-table-column>

        <el-table-column prop="name" label="姓名"/>
<!--        <el-table-column prop="param.certificatesTypeString" label="证件类型"/>-->
<!--        <el-table-column prop="certificatesNo" label="证件编号"/>-->
<!--        <el-table-column label="性别">-->
<!--        <template slot-scope="scope">-->
<!--                {{ scope.row.sex == 1 ? '男' : '女' }}-->
<!--        </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="healthCon" label="健康状态"/>
      <el-table-column prop="temperature" label="体温（度）"/>
        <el-table-column prop="location" label="所在地"/>
        <el-table-column label="是否处于隔离状态">
        <template slot-scope="scope">
                {{ scope.row.isolated == 1 ? '是' : '否' }}
        </template>
    </el-table-column>
      <el-table-column label="是否为重点人群">
        <template slot-scope="scope">
          {{ scope.row.focusGroups == 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="是否与感染者接触">
        <template slot-scope="scope">
          {{ scope.row.virusTouch == 1 ? '是' : '否' }}
        </template>
      </el-table-column>
    <el-table-column prop="reportDate" label="上报日期"/>
      <el-table-column label="备注">
        <template slot-scope="scope">
          {{ scope.row.remark ===''  ? '无' : scope.row.remark }}
        </template>
      </el-table-column>
    </el-table>





      <el-dialog title="修改用户信息" :visible.sync="dialogFormVisibleUserBasic">
        <el-form :model="formUserBasic" label-width="10%" label-position="left" ref="formUserBasic" align="left">
          <el-form-item label="姓名"
                        prop="realName"
                        :rules="[
      { required: true, message: '姓名不能为空',trigger: 'blur'},
      ]">
            <el-input  style="width: 30%;" v-model.realName="formUserBasic.realName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份类型"
                        prop="idType"
                        :rules="[
      { required: true, message: '身份类型不能为空',trigger: 'blur'},
      ]">
            <el-select v-model.idType="formUserBasic.idType"  placeholder="请选择身份类型">
              <el-option
                  v-for="item in idTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份编号"
                        prop="idNumber"
                        :rules="[
      { required: true, message: '身份编号不能为空',trigger: 'blur'},
      ]"
          >
            <el-input style="width: 30%;" v-model.idNumber="formUserBasic.idNumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="生日"
                        prop="birthday"
                        :rules="[
      { required: true, message: '日期不能为空',trigger: 'blur'},
      ]">
            <el-date-picker
                v-model.birthday="formUserBasic.birthday"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="联系方式"
                        prop="phone"
                        :rules="[
      { required: true, message: '联系方式不能为空',trigger: 'blur'},
      { type: 'number', message: '请输入正确的手机号码',trigger: 'blur'}
      ]">
            <el-input v-model.number="formUserBasic.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="住址"
                        prop="address"
                        :rules="[
      { required: true, message: '住址不能为空',trigger: 'blur'},
      ]">
            <el-input v-model.address="formUserBasic.address" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleUserBasic = false">取 消</el-button>
          <el-button type="primary" @click="updateUserBasic('formUserBasic')">修改</el-button>
        </div>
      </el-dialog>


<!--      <el-dialog title="修改认证信息" :visible.sync="dialogFormVisibleAuthBasic">-->
<!--        <el-form :model="formAuthBasic">-->
<!--          <el-form-item label="姓名" >-->
<!--            <el-input v-model="formAuthBasic.name" autocomplete="off"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="活动区域" :label-width="formLabelWidth">-->
<!--            <el-select v-model="form.region" placeholder="请选择活动区域">-->
<!--              <el-option label="区域一" value="shanghai"></el-option>-->
<!--              <el-option label="区域二" value="beijing"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--          <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
<!--        </div>-->
<!--      </el-dialog>-->
    </div>



</template>
<script>
import userInfoApi from '@/api/userInfo'
import jwtDecode from "jwt-decode";
import {getToken} from "@/utils/auth";
import {getChildrenByNameList, getUserInfo, getUserReportList, updateUserBasicApi} from "@/views2/api/myselfManager";
import popMessage from "@/utils/popMessage";
export default {
    // 定义数据
    data() {
        return {
            id: this.$route.params.id,
          listLoading:true,
            userInfoList: {}, // 用户基本信息
              reportList: [], // 打卡记录信息
              dialogFormVisibleUserBasic:false,
              formUserBasic:{},
          dialogFormVisibleAuthBasic:false,
          formAuthBasic:{},
          idTypeList:[]


        }
    },

    // 当页面加载时获取数据
    created() {
        this.fetchDataById()
      this.getUserReportList();
      this.getIdTypeFromDict();
    },

    methods: {
        // 根据id查询会员记录
        fetchDataById() {
           getUserInfo(jwtDecode(getToken()).userId).then(res=>{

             let data=res.data;
             this.userInfoList=data.data;
             this.userInfoList.username=jwtDecode(getToken()).username
           })
        },

      getUserReportList(){
        getUserReportList(jwtDecode(getToken()).userId).then(res=>{

          let arr=res.data.data;

          this.reportList=arr

          console.log(arr)

          this.listLoading=false


        }).catch(error=>{})

      },
      userBasic()
      {


        this.dialogFormVisibleUserBasic=true;


      },
      AuthBasic()
      {
        if (jwtDecode(getToken()).roles!=="admin")popMessage(false,"您当前无权限修改认证信息，请联系管理员","error")
        else this.dialogFormVisibleAuthBasic=true;
      },
      getIdTypeFromDict()
      {
        getChildrenByNameList().then(res=>{
          let data=res.data;

          this.idTypeList=data.data;

        }).catch(err=>{
          popMessage(false,"获取证据类型失败","error")
        })
      },
      updateUserBasic(formName)
      {


        /*验证*/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let temp=JSON.parse(JSON.stringify(this.formUserBasic));//深拷贝
            temp.userId=jwtDecode(getToken()).userId;

            updateUserBasicApi(temp).then(res=>{
              popMessage(false,"修改成功","success");
              window.location.reload()

            }).catch(err=>{

              popMessage(false,"修改失败","error");
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      }

    }
}
</script>
